<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="UTF-8">
    <title th:text="${data.title}+' 后台' "></title>

    <div th:include="/common/layui"></div>
    <div th:include="/common/jq"></div>

    <!--添加 layui 自己的js  支持加载-->
    <script src="/manage/manage_base.js"></script>
    <!--添加 layui 自己的js  支持加载-->

</head>

<style>
    html, body {
        min-width: 1024px;
        height: 100%;
        overflow: hidden;
    }

    .layui-tab-item {
        overflow-x: scroll;
    }
</style>

<script>

    //定义在外面
    var table;
    var element;
    layui.use(['laydate', 'laypage', 'layer', 'form', 'table', 'carousel',
        'upload', 'element'], function () {
        table = layui.table;
        element = layui.element; //元素操作
    });

    //这个值是由  manage_top.jsp里面的一个显示隐藏的侧边的方法控制
    var left_width = 200;

    //可以从子页面传来个 关闭  由我关闭
    function delete_tab_id(id) {
        element.tabDelete('layer_tab', id); //
    }

    $(function () {
        init_tab_height();
        window.onresize = function () {
            init_tab_height();
        }
    });


    //遍历选项卡，存在true  不存在false
    function for_tab(id) {
        add_flag = false;
        $(".layui-tab-title li").each(function () {
            var lay_id = $(this).attr("lay-id");
            console.log(lay_id);
            if (lay_id) {
                if (lay_id == id) {
                    add_flag = true;
                }
            }
        });
        return add_flag;
    }

    function init_tab_height() {
        var body_width = document.body.offsetWidth;
        layui_tab_item_width = (body_width - left_width);
        console.log("layui_tab_item的宽是:" + layui_tab_item_width);

        //计算layui-tab-item 需要 设置多少的高 顶部的60  layui-tab-title=41
        var body_height = document.body.offsetHeight;
        layui_tab_item_height = (body_height - 60 - 41);
        $(".layui-tab-item").css("height", layui_tab_item_height + "px");
        console.log("layui_tab_item的高是:" + layui_tab_item_height);
    }


    function addTab(id, title, content) {
        //遍历tab 看看这个id是否存在  如果存在直接切换
        var s = for_tab(id);
        if (s) {
            element.tabChange('layer_tab', id); //切换到 用户点的
            init_tab_height();
        } else {
            //添加
            element.tabAdd('layer_tab', {
                title: title
                , content: content
                , id: id
            });
            element.tabChange('layer_tab', id); //切换到 用户点的
            init_tab_height();
        }
    }
</script>
<body>
<div style="display: flex;display: -webkit-flex; flex-direction:column; height: 100%; ">

    <div th:include="/common/manage_top" style="height: 60px; width: 100%;">
    </div>

    <div style=" flex:1;-webkit-flex:1;">
        <div th:include="/common/left_menu"></div>

        <div id="main_scroll" style="flex:1;-webkit-flex:1;padding-left: 200px;">
            <div class="layui-tab layui-tab-brief" lay-allowclose="true" style="margin: 0;" lay-filter="layer_tab">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content" style="padding:0px;">
                </div>
            </div>
        </div>

    </div>

</div>


</body>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel',
        'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作

        //监听导航点击
        element.on('nav(left_menu)', function (elem) {
            // $(this)
            elem = $(this).parent();

            var id = $(elem).attr("id");
            var url = $(elem).attr("url");
            var text = $(elem).attr("dd_text");

            console.log(id);
            console.log(url);
            console.log(text);
            if (id) {
                var content = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='" + url + "'></iframe>";
                addTab(id, text, content);
            }

        });

    });
</script>


</html>